<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>学生选课管理系统</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="/assets/css/bootstrap.css" rel="stylesheet" />
        <link href="/assets/css/main.css" rel="stylesheet" />
        <link rel="stylesheet" href="/assets/css/iconfont.css">
        <link rel="stylesheet" href="/assets/css/my.css">
        <link rel="icon" href="/assets/img/ico/favicon.ico" type="image/png">
    </head>
    <body>

        <% include ./common/header.ejs %>

        <% include ./common/siderbar.ejs %>
        <div id="content">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-lg-12 heading">
                        <ul class="nav nav-tabs">
                            <li><a href="/admin">按课程查看</a></li>
                            <li class="active"><a href="/admin/showByStudent">按学生查看</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div>
                <ul class="nav nav-tabs">
                    <li role="presentation" class="dropdown active">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;" role="button" aria-haspopup="true" aria-expanded="false">
                            已选两门
                        </a>
                    </li>
                    <li role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;" role="button" aria-haspopup="true" aria-expanded="false">
                            已选一门
                        </a>
                    </li>
                    <li role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;" role="button" aria-haspopup="true" aria-expanded="false">
                            未选
                        </a>
                    </li>
                </ul>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>课程号</th>
                            <th>课程名</th>
                            <th>教师</th>
                            <th>已选人数</th>
                            <th>剩余人数</th>
                        </tr>
                    </thead>
                    <tbody class="tbody">

                    </tbody>

                </table>
            </div>
            <div class="clearfix"></div>
        </div>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="/assets/js/bootstrap/bootstrap.js"></script>
    </body>
</html>

<script>


    $(function () {
        $('.nav-tabs').delegate('a', 'click', function (el) {
            var sidx = ''
            var sord = ''
            if (el.target.id === 'sortNum_desc') {
                sidx = 'number'
                sord = 'asc'
            }else if (el.target.id === 'sortNum_asc') {
                sidx = 'number'
                sord = 'desc'
            }
            else if (el.target.id === 'cid_asc') {
                sidx = 'cid'
                sord = 'desc'
            }
            else if (el.target.id === 'cid_desc') {
                sidx = 'cid'
                sord = 'asc'
            }else {
                return
            }
            $.ajax({
                url: '/course',
                data: {
                    page: 1,
                    rows:20,
                    sidx,
                    sord
                },
                success ({rows}) {
                    $('.tbody').empty();
                    rows.forEach(function (cou) {
                        $('.tbody').append(`
                            <tr>
                                <td>${cou.cid}</td>
                                <td>${cou.cname}</td>
                                <td>${cou.teacher}</td>
                                <td>${cou.students.length}</td>
                                <td>${cou.number}</td>
                            </tr>
                        `)
                    })

                }
            })
        })
        $('#sortNum_desc').trigger('click')
    })

</script>